<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<style type="text/css">
	.gray-bg{
		font-size: 13px;
		color: #333;
	}
	#left{
		height: 223px;
		width: 180px;
		outline: none;/* 选中后颜色不改变 */
		float: left;
		margin: 15px 0px 0px 45px;
	}#middle{
		 height: 223px;
		width: 80px;
		margin-top: 15px;
		float: left;
	}#right{
		height: 223px;
		width: 180px;
		outline: none;/* 选中后颜色不改变 */
		margin-top: 15px;
	}
	label#place_choose {
		padding-left: 15px;
		margin-top: 15px;
	}
	label#have_chosen {
		padding-left: 235px;
	}
	.strAll{
		margin-left: 15px;
		margin-top: 14px;
	}
	input#add {
		margin-top: 50px;
	}
	input#addAll {
		margin-top: 60px;
	}
	#tooltbar{
		width: 500px;
		height:10px;
	}
	optgroup {
		background-color: #b9b9b9;
		text-align: center;
		font-weight: 700;
	}
</style>
<body class="gray-bg">

<form action="#" method="post">

		<input type="hidden" name="userId"   id="userId" />
		<input type="hidden" name="userName" id="userName" />

		<!-- 顶部大框 -->
		<div id="tooltbar"></div>

			<!-- 左边选择框 -->
			<select name="left" size="50" multiple="multiple" id="left" >
				<optgroup label="请选择"></optgroup>
			</select>


			<!-- 中间动作框 -->
			<div id="middle">
				<input id="add" 	class="strAll"	name="add"	  type="hidden" value=" ＞ "  /><br>
				<input id="addAll" 	class="strAll"	name="addall" type="button" value=" ＞＞ " /><br>
				<input id="del"	 	class="strAll"	name="del"	  type="hidden" value=" ＜ "  /><br>
				<input id="delAll" 	class="strAll" 	name="delAll" type="button" value=" ＜＜ " /><br>
			</div>

			<!-- 右边目标框 -->
			<select name="right" size="50" multiple="multiple" id="right" >
				<optgroup label="已选择"></optgroup>
			</select>

</form>
<div th:include="include :: footer"></div>
<script th:inline="javascript">


	$(function () {

		$.ajax({
//			url: ctx+"system/user/list",
			url: ctx+"assets/pTask/listUsers",
			dataType: "json",
			type: "post",
			success: function(data) {
				var infos = data.rows;
				for (var i = 0; i < infos.length; i++) {
					$("#left").append("<option style='font-size: 14px;' value='" + infos[i].userId + "'>" + infos[i].userName + "</option>");
				}
			}
		});

		//	单击添加用户
		$("#left").click(function() {

			$("option:selected", this).clone().appendTo("#right");
			$("option:selected", this).remove();
			//$("#s1 option:first,#s2 option:first").attr("selected",true); ?
		});

        //	单击删除用户
		$("#right").click(function() {
			$("option:selected", this).clone().appendTo("#left");
			$("option:selected", this).remove();
			//$("#s1 option:first,#s2 option:first").attr("selected",true); ?
		});

        //	选择添加按钮添加用户
		/*$("#add").click(function() {
			$("#left option:selected").clone().appendTo("#right");
			$("#left option:selected").remove();
			//$("#s1 option:first,#s2 option:first").attr("selected",true); ?
		});

        //	选择删除按钮添加用户
		$("#del").click(function() {
			$("#right option:selected").clone().appendTo("#left");
			$("#right option:selected").remove();
			//$("#s1 option:first,#s2 option:first").attr("selected",true); ?
		});*/

        //	选择添加全部按钮添加用户
		$("#addAll").click(function() {
			$("#left option").clone().appendTo("#right");
			$("#left option").remove();
			//$("#s1 option:first,#s2 option:first").attr("selected",true); ?
		});

        //	选择删除全部按钮添加用户
		$("#delAll").click(function() {
			$("#right option").clone().appendTo("#left");
			$("#right option").remove();
			//$("#s1 option:first,#s2 option:first").attr("selected",true); ?
		});

    });
</script>
</body>
</html>